<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    
    <!-- 显示当前用户角色 -->
    <el-card class="role-info" v-if="userRole">
      <div slot="header">
        <span>当前用户信息</span>
      </div>
      <p><strong>用户名:</strong> {{ name }}</p>
      <p><strong>角色:</strong> {{ userRole }}</p>
      <!-- <p><strong>Store中的角色:</strong> {{ storeRole }}</p>
      <p><strong>LocalStorage中的角色:</strong> {{ localStorageRole }}</p>
      <p><strong>LocalStorage中的姓名:</strong> {{ localStorageName }}</p>
      <p><strong>LocalStorage中的头像:</strong> {{ localStorageAvatar }}</p> -->
      <el-button @click="refreshUserInfo" type="primary" size="small">
        刷新用户信息
      </el-button>
    </el-card>

    <div class="box">
      <div class="sys">
        <h2>人工智能学院</h2>
        <div class="item">
          <img src="https://file.sdxd.edu.cn/file/20220921HuoTfYzL@1080@659.jpg" alt="" class="sysimg animate__animated"
            v-animate="'animate__fadeIn'">
          <p class="text animate__animated " v-animate="'animate__lightSpeedInRight'">
            于2003年至今先后投资2000多万元建成了一个综合机房和一个实训中心，并不断地进行完善，从而形成一流的教学实验设以及完善的网络服务设施。电子实训中心及专业机房占地1200平方米。其中综合机房包括软件测试、软件开发等5个实验室，实训中心包括物联网实训室、虚拟仪器设备实训室、创新实验室、电工电子实训室、模拟电路实训室等15个实验室
          </p>
        </div>
        <div class="item">
          <p class="text animate__animated" v-animate="'animate__lightSpeedInLeft'">
            于2003年至今先后投资2000多万元建成了一个综合机房和一个实训中心，并不断地进行完善，从而形成一流的教学实验设以及完善的网络服务设施。电子实训中心及专业机房占地1200平方米。其中综合机房包括软件测试、软件开发等5个实验室，实训中心包括物联网实训室、虚拟仪器设备实训室、创新实验室、电工电子实训室、模拟电路实训室等15个实验室
          </p>
          <img src="https://file.sdxd.edu.cn/file/20231031jEYcclEp@1600@899.jpg" alt="" class="sysimg animate__animated"
            v-animate="'animate__fadeIn'">
        </div>
      </div>
    </div>       
    <!-- <img src="https://file.sdxd.edu.cn/file/20231031NgwJdKxh@1600@899.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231018YORluNJg@3200@2146.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231103QaPzKkGZ@1600@899.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20240301dzNzNXIz@1600@899.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231219VVtCTYtK@1600@971.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231219HKbaWzPV@1600@914.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231018EhrqMdWE@1600@899.jpg" alt="">
    <img src="https://file.sdxd.edu.cn/file/20231031EnlKLpci@1600@899.jpg" alt=""> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserRole } from '@/utils/permission'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ]),
    userRole() {
      return getUserRole()
    },
    storeRole() {
      return this.$store.state.user.role
    },
    localStorageRole() {
      return localStorage.getItem('role')
    },
    localStorageName() {
      return localStorage.getItem('name')
    },
    localStorageAvatar() {
      return localStorage.getItem('avatar')
    }
  },
  methods: {
    async refreshUserInfo() {
      try {
        await this.$store.dispatch('user/getInfo')
        this.$message.success('用户信息已刷新')
      } catch (error) {
        this.$message.error('刷新用户信息失败')
        console.error('Failed to refresh user info:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.role-info {
  margin-bottom: 20px;
}

.box {
  .sys {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #ccc;
      .sysimg {
        width: 500px;
      }
      .text{
        line-height: 50px;
        font-size: 22px;
        padding: 20px;
        
      }
    }
  }
}
</style>
